<template>
	<view>
		<view class="center">
			<image :src="goods.goods_big_logo" mode=""></image>
		</view>
	     <text v-model="goods.goods_name"></text>
	    <view class="goods-detail">
	    	<view class="detail-left">
	    		<view class="goods-left">
	    		</view>
	    		<view class="size">
	    		    <text style="font-size: 25rpx;">价格：</text>
	    		    <text class="goods-price">￥{{goods.goods_price}}/件</text>
	    		</view>
	    	</view>
			
	    	<view class="detail-right">
				购买数量：
	    		<text class="subtract" @click="reduce">-</text>
	    		<text class="num">{{num}}</text>
	    		<text @click="add" class="add">+</text>
	    	</view>
	    </view>
		<view >
       <button type="primary" @click="goCart">加入购物车</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods:'',
				num:1,
				list:[]
			}
		},
		methods: {
			// 获取商品详情接口
			async getGoodsDetail (id) {
			    // 调用后端接口
			    const {message} = await this.$request({
			        url: '/api/public/v1/goods/detail',
			        data: {
			            goods_id: id
			        }
			    })
			    
			    // 更新商品详情数据
			    this.goods = message;
				console.log(this.goods);
			},
			add(){
				this.num++
			},
			reduce(){
				if(this.num==1) return
				this.num--
			},
			goCart () {
				this.list=Array.from(uni.getStorageSync("cart"))
				var newOne = {
				    name:this.goods.goods_name,
				    goods_price:this.goods.goods_price,
				    goods_number:this.num,
				    goods_small_logo:this.goods.goods_big_logo,
					ischeck:false,
					goods_id:this.goods.goods_id
				};
				     let key = false
					 console.log(1234);
					for (let i = 0; i < this.list.length; i++) {
						console.log(12345);
					    var one = this.list[i];
					    // 如果重复：
					    if (one.name == newOne.name) {
					        one.goods_number=one.goods_number+this.num
					        key = true;  // 被改变了
							console.log(111);
					        break;
					    }
					}
					console.log(222);
				     if (key==false) {
						 	 console.log(333);
				         this.list.push(newOne);
					
				     }     
				uni.setStorageSync("cart",this.list);
			    // uni.switchTab({
			    //     url: '/pages/cart/cart'
			    // })
			
			
		},
		onLoad(params){
			  const {id} = params;	
			    // 根据 id 查询商品详情
			    this.getGoodsDetail(id);
		}
		}}
</script>

<style lang="less" scoped>
.center {
	text-align:center;
	margin-top: 10rpx;
}
	.goods{
		line-height: 80rpx;
		background-color: #FFFFFF;
		&-detail{
		    display: flex;
		    padding: 30rpx 15rpx 30rpx 30rpx;
		    background-color: #fff;
		    justify-content: space-between;
		    border-bottom: 5rpx solid #F1F1F1;
		    align-items: center;
		    .detail-left{
		        display: flex;
		        .goods-left{
		            display: flex;
		            align-items: center;
		        }
		    }
		    .size{
		        display: flex;
		        justify-content: space-around;
		        flex-direction: column;
		        margin-left: 30rpx;
		        .goods-price{
		            font-size: 25rpx;
		            color: #F44545;
		            
		        }
		    }
		    .detail-right{
		        text{
		            width: 50rpx;
		            line-height: 50rpx;
		            text-align: center;
		            display: inline-block;
		            background-color: #F7F7F7;
		            margin-right: 10rpx;
		        }
		        .add {
		            color: #FA4305;
		            border-radius: 10rpx 30rpx 30rpx 10rpx;
		            margin-right: 20rpx;
		        }
		        .subtract{
		            border-radius: 30rpx 10rpx 10rpx 30rpx;
		        }
		    }
		}
	}
	.empty{
		
		    position: relative;
		    top: 220rpx;
		    text-align: center;
		    display: flex;
		    align-items: center;
		    flex-direction: column;
		    &-text{
		        color: #808080;
		        margin-bottom: 50rpx;
		    }
		    &-button{
		        width: 300rpx;
		        height: 90rpx;
		        color:orange;
		        border: 1rpx solid orange;
		        text-align: center;
		        line-height: 90rpx;
		        border-radius: 48rpx;
		    }		
	}
	.end{
	    width: 100%;
	    height: 90rpx;
	    background-color:#fff;
	    position: fixed;
	    bottom: 100rpx;
	    left: 0;
	    display: flex;
	    align-items: center;
	    &-left{
	        width: 70%;
	        display: flex;
	        justify-content: space-between;
	        padding: 0 30rpx;
	        .end-flex{
	            display: flex;
	            align-items: center;
	        }
	    }
	    &-right{
	        width: 30%;
	        line-height: 90rpx;
	        background-color: #F44545;
	        text-align: center;
	        color: #fff;
	    }
	}

</style>
